<template>
  <div style="text-align: center;background-color: #f1f1f3;height: 100%;padding: 0px;margin: 0px;">
    <h1 style="font-size: 50px; text-align: center" ><DateUtils></DateUtils></h1>
    <el-descriptions  title="个人中心" :column="2" size="40" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-custom"></i>
          账号
        </template>
        {{user.userNum}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          电话
        </template>
        {{user.userPhone}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          性别
        </template>
        <el-tag
            :type="user.userSex === '1' ? 'primary' : 'danger'"
            disable-transitions><i :class="user.userSex==1?'el-icon-male':'el-icon-female'"></i>{{user.userSex==1?"男":"女"}}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          角色
        </template>
        <el-tag
            type="success"
            disable-transitions>{{user.roleId==0?"超级管理员":(user.roleId==1?"社团管理员":"社团成员")}}</el-tag>

      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-promotion"></i>
          社团
        </template>
        {{cname}}

      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-edit"></i>
          修改信息
        </template>
        <el-button type="success" icon="el-icon-edit" size="medium" @click="mod()">修改</el-button>

      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-upload"></i>
          上传头像
        </template>
        <el-upload
            class="upload-demo"
            drag
            :data="fileData"
            :action="uploadsrc"
            :before-upload="beforeAvatarUpload"
            multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg文件，且不超过500kB</div>
          <div class="el-upload__tip" slot="tip">第一次上传完头像后刷新即可加载,修改头像用(Ctrl+Shift+R)刷新页面</div>
        </el-upload>

      </el-descriptions-item>


    </el-descriptions>

    <el-dialog
        title="提示"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="名字" prop="userName">
          <el-col :span="20">
            <el-input v-model="form.userName" ></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="密码" prop="userPassword" >
          <el-col :span="20">
            <el-input v-model="form.userPassword" type="password"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="年龄" prop="userAge">
          <el-col :span="20">
            <el-input v-model="form.userAge" ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="性别" prop="userSex">
          <el-radio-group v-model="form.userSex">
            <el-radio label="1">男</el-radio>
            <el-radio label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="电话" prop="userPhone">
          <el-col :span="20">
            <el-input v-model="form.userPhone" ></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" >
    <el-button @click="centerDialogVisible=false">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import {client,	getFileNameUUID} from '../utils/alioss';
import DateUtils from "./DateUtils";
export default {
  name: "Home",
  components: {DateUtils},
  data() {
    let checkAge = (rule, value, callback) => {
      if(value>150){
        callback(new Error('年龄输入过大'));
      }else{
        callback();
      }
    };
    return {
      centerDialogVisible:false,
      user:{},
      id:'',
      cname:'',
      imagesrc:'',
      uploadsrc:'',
      fileData: {
        userId:'',
      },
      form:{
        userName:'',
        userPassword:'',
        userAge:'',
        userPhone:'',
        userSex:'0'
      },
      rules:{
        userName: [
          { required: true, message: '请输入名字', trigger: 'blur' },
        ],
        userPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 36, message: '长度在 6 到 36 个字符', trigger: 'blur' }
        ],
        userAge: [
          {required: true, message: '请输入年龄', trigger: 'blur'},
          {min: 1, max: 3, message: '⻓度在 1 到 3 个位', trigger: 'blur'},
          {pattern: /^([1-9][0-9]*){1,3}$/,message: '年龄必须为正整数字',trigger: "blur"},
          {validator:checkAge,trigger: 'blur'}
        ],
        userPhone: [
          {required: true,message: "手机号不能为空",trigger: "blur"},
          {pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur"}
        ]
      }
    }
  },
  computed:{

  },
  methods:{
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 0.5;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 500kb!');
      }
      return isJPG && isLt2M;
    },
    mod(){
      this.centerDialogVisible=true
      this.$nextTick(()=>{
        this.form.userId = this.user.userId
        this.form.userNum = this.user.userNum
        this.form.userName = this.user.userName
        this.form.userPassword = this.user.userPassword
        this.form.userAge = this.user.userAge+''
        this.form.userSex = this.user.userSex+''
        this.form.userPhone = this.user.userPhone
        this.form.roleId = this.user.roleId
        this.form.cid = this.user.cid
      })
    },
    save(){
      if (this.form.userPassword != this.user.userPassword){
        this.form.userPassword = this.$md5(this.form.userPassword)
      }
      this.$axios.post(this.$httpUrl+'/user/update',this.form).then(res=>res.data).then(res=>{
        console.log(res)
        if (res.code==200){
          this.$message({
            showClose: true,
            message: '修改成功,重新登录后生效！',
            type: 'success'
          });
          this.centerDialogVisible=false
          this.loadPost()
        }else{
          this.$message({
            showClose: true,
            message: '修改失败',
            type: 'error'
          });
        }
      })

    },
    init(){
      this.user = JSON.parse(sessionStorage.getItem('CurUser'))
      this.fileData.userId = this.user.userId
      this.uploadsrc = this.$httpUrl+'/image/img'
      this.imagesrc="https://zb-study-xzt.oss-cn-hangzhou.aliyuncs.com/javaweb-image/user"+this.user.userId+'.jpg'
    },
    getcname(){
      this.$axios.get(this.$httpUrl+'/community/cname?id='+this.user.cid).then(res=>res.data).then(res=>{
        console.log(res)
        if (res.code==200){
          this.cname = res.data
          console.log(res.data)
        }
      })
    },

  },
  created(){
    this.init()
    this.getcname()
  }
}
</script>

<style scoped>
.el-descriptions{
  width:90%;

  margin: 0 auto;
  text-align: center;
}
</style>